// 封装图片懒加载指令 并且以插件的形式

// 指令   插件

// vue3有什么变化？

// 插件？
// 1. 定义插件 2.注册插件
// 定义插件 俩种方式  对象定义法  函数定义法

/*
// vue2 定义
const plugin = {
  install (Vue) {
    // 插件的逻辑
  }
}
// 如果是函数定义的话 函数本身会被当成 install方法执行
function plugin(Vue){
  // 插件的逻辑
}
// 注册 调用use方法的时候 会自动执行插件的install方法并且会自动把Vue构造函数传入
// install方法中

Vue.use(plugin)
*/

/**
  vue3
  先定义 再注册
  定义的俩种写法也没有变化  对象定义法 + 函数定义法

  const plugin = {
    install(app){
      // 插件逻辑
    }
  }
  // 当执行use方法的时候 应用实例对象app会自动当成实参传入install方法
  createApp().use(plugin)
 */

/**
 * vue2
 Vue.direactive('指令名称',{
   inserted(el, binding){
    // el: 指令挂在哪个元素 就指的是那个dom对象
    // binding.value: 指令等于号后面的表达式的值
   }
 })
 <img v-指令名称="表达式"/>

 vue3
 createApp() -> app
 app.direactive('指令名称',{
   mounted(el, binding){
     // el: 指令挂在哪个元素 就指的是那个dom对象
     // binding.value: 指令等于号后面的表达式的值
   }
 })
 */
import { useIntersectionObserver } from '@vueuse/core'
const plugin = {
  install (app) {
    console.log('插件已经注册好了', app)
    // 定义指令
    app.directive('img-lazy', {
      mounted (el, binding) {
        // console.log(el, binding.value)
        const { stop } = useIntersectionObserver(
          // 监听目标元素
          el,
          ([{ isIntersecting }], observerElement) => {
            console.log(isIntersecting)
            if (isIntersecting) {
              el.src = binding.value
              stop()
            }
          }
          // 刚进入视口区域就立刻执行回调 0 - 1
          // { threshold: 0 }
        )
      }
    })
  }
}
export default plugin
